<template>
    <div class="qilin-crab">
        <el-card>
            <QilinSearch :searchConfig.sync="searchConfig" @searchData="getTableData()">
                <template v-slot:dateRange="slotData">
                    <el-date-picker v-model="searchConfig.submitData.startTime" type="datetime"
                        placeholder="请输入开始时间" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placement="bottom-start"
                    ></el-date-picker>
                    <span class="search-separate">-</span>
                    <el-date-picker v-model="searchConfig.submitData.endTime" type="datetime"
                        placeholder="请输入结束时间" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placement="bottom-start"
                    ></el-date-picker>
                </template>
            </QilinSearch>
        </el-card>
        <el-card>
            <QilinTable :tableConfig.sync="tableConfig" @changeCurrentPage="handleCurrentPage"
                @changeCurrentSize="handleSizeChange"
            >
                <template v-slot:category="slotData">
                    <div v-for="(item,index) in slotData.data.scope.row.category" :key="index">
                        <b>{{item.sex}}</b>
                        <b style="margin:0 5px;">{{item.specification+"两/只"}}</b>
                        <b>{{item.number+"只"}}</b>
                    </div>
                </template>
            </QilinTable>
        </el-card>
    </div>
</template>
<script>
import {getCrabData} from "@/api/futureMarket/crab.js";
export default {
    data(){
        return {
            searchConfig:{
                itemConfig:[
                    {
                        labelName:"选择时间",
                        type:"slot",
                        slotName:"dateRange"
                    }
                ],
                submitData:{
                    startTime:"",
                    endTime:""
                }
            },
            tableConfig:{
                headerConfig:[
                    {
                        label:"套餐",
                        prop:"type",
                        width:60
                    },
                    {
                        label:"种类规格",
                        prop:"category",
                        type:"slot",
                        slotName:"category"
                    },
                    {
                        label:"总数量/只",
                        prop:"total"
                    },
                    {
                        label:"总价格/元",
                        prop:"price"
                    },
                    {
                        label:"时间",
                        prop:"date",
                        width:180,
                        type:"date",
                        format:"yyyy-MM-dd"
                    },
                    {
                        label:"备注",
                        prop:"remark"
                    }
                ],
                tableData:[],
                paginationsObj:{
                    currentPage:1, //当前页
                    pageSize:5, //当前每页数量
                    pageSizes:[5,10,15], //每页显示多少条选项集
                    total:0, //表格总数量
                    layout:"total,sizes,prev,pager,next,jumper"
                }
            },
            dialogConfig:{ //弹窗的配置对象
                isShow:false,
                title:"添加螃蟹信息"
            },
        }
    },
    methods:{
        // 点击添加按钮事件监听
        insertData(){
            this.dialogConfig.title="添加螃蟹信息";
            this.dialogConfig.isShow=true;
        },
        //关闭弹窗事件监听
        closeDialog(){
            this.$refs["formData"].formResetFields();
            this.dialogConfig.isShow=false;
        },
        // 点击切换页码事件监听
        handleCurrentPage(val){
            // console.log(val);
            this.tableConfig.paginationsObj.currentPage=val;
            this.getTableData();
        },
        // 点击切换每页数量事件监听
        handleSizeChange(val){
            // console.log(val);
            this.tableConfig.paginationsObj.pageSize=val;
            this.getTableData();
        },
        // 初始化获取表格内数据
        getTableData(){
            getCrabData({
                pageNum:this.tableConfig.paginationsObj.currentPage,
                pageSize:this.tableConfig.paginationsObj.pageSize,
                startTime:this.searchConfig.submitData.startTime,
                endTime:this.searchConfig.submitData.endTime
            }).then((res)=>{
                if(res.code===1000){
                    this.tableConfig.tableData=res.data.data;
                    this.tableConfig.paginationsObj.total=res.data.total;
                };
            });
        }
    },
    mounted(){
        this.getTableData();
    }
}
</script>
<style lang="less" scoped>
.qilin-crab{
    width: 100%;
    padding:0 10px 40px;
    .qilin-QilinSearch{
        .el-form{
            .search-separate{
                margin:0 10px;
            }
        }
    }
}
</style>